<template>
  <div class="config-monitor">
    <h2 class="title f1">监控配置</h2>
    <div class="card c-f f-14" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <template v-if="permission">
        <div class="fr ac item">
          <div class="label">风险字段</div>
          <el-select v-model="form.risk">
            <el-option value="1,1" label="今日测温人数"/>
            <el-option value="1,2" label="今日测温异常人数"/>
            <el-option value="1,12" label="今日核酸检测人数"/>
            <el-option value="1,13" label="今日确诊人数"/>
            <el-option value="0,13" label="累计确诊人数"/>
          </el-select>
        </div>
        <div class="fr item">
          <div class="label" style="padding-top: 20px;">风险配置</div>
          <div class="f1">
            <div class="list">
              <table>
                <thead>
                <th>风险等级</th>
                <th v-for="item in ranklevels" :key="item.ranklevel">{{item.label}}</th>
                </thead>
                <tbody>
                <tr v-for="item in tableData" :key="item.risklevel">
                  <td>{{item.label}}</td>
                  <td v-for="val in item.list" :key="val.ranklevel">
                    <input type="number" v-model="val.threshold"/>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="fr ac item">
          <div class="label">预警通知</div>
          <div class="fr ac">
            <span class="checkbtn" :class="{ on: form.warningnotifier === '1' }"><span class="a" @click="form.warningnotifier = '1'">组织负责人</span></span>
            <span class="checkbtn" :class="{ on: form.warningnotifier === '2' }"><span class="a" @click="form.warningnotifier = '2'">组织所有人</span></span>
          </div>
        </div>
        <div class="fr ac item">
          <div class="label">预警通知方式</div>
          <div class="fr ac">
            <span class="checkbtn" :class="{ on: form.sms === '1' }"><span class="a" @click="form.sms = form.sms === '1' ? '0' : '1'">手机短信</span></span>
            <span class="checkbtn" :class="{ on: form.conversation === '1' }"><span class="a" @click="form.conversation = form.conversation === '1' ? '0' : '1'">手机通话</span></span>
          </div>
        </div>
        <div class="fr ac item">
          <div class="label">通知间隔</div>
          <el-select v-model="form.intervals">
            <el-option v-for="item in intervals" :key="item.interval" :value="item.interval" :label="item.label"/>
          </el-select>
        </div>

        <div class="tc mt-30">
          <el-button type="primary" @click="submit" :loading="submiting">确定</el-button>
        </div>
      </template>
      <no-right v-else/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'config-monitor',
    data () {
      return {
        loading: false,
        submiting: false,
        list: [],
        risklevels: [
          { risklevel: 'g', label: '绿色' },
          { risklevel: 'b', label: '蓝色' },
          { risklevel: 'y', label: '黄色' },
          { risklevel: 'o', label: '橙色' },
          { risklevel: 'r', label: '红色' }
        ],
        ranklevels: [
          { ranklevel: '5', label: '班级' },
          { ranklevel: '4', label: '学校' },
          { ranklevel: '3', label: '市教育部' },
          { ranklevel: '2', label: '省教育部' },
          { ranklevel: '1', label: '国家' }
        ],
        intervals: [
          { interval: '1', label: '仅通知一次' },
          { interval: '6', label: '每 6 小时' },
          { interval: '12', label: '每 12 小时' },
          { interval: '24', label: '每 24 小时' },
        ],
        form: {
          risk: '',
          warningnotifier: '',
          conversation: '',
          sms: '',
          intervals: ''
        }
      }
    },
    computed: {
      tableData () {
        return this.risklevels.map(({ risklevel, label }) => {
          const item = {}
          item.list = this.ranklevels.map(({ ranklevel }) => {
            return this.list.find(v => v.risklevel === risklevel && v.ranklevel === ranklevel) || {}
          })
          item.risklevel = risklevel
          item.label = label
          return item
        })
      },
      permission () {
        const { roleid } = this.$store.state
        return [1001].includes(roleid)
      }
    },
    methods: {
      getList () {
        this.loading = true
        this.$http('health/healthInfoStatistics/getRiskLevel').then(
          res => {
            this.list = res.data || []
            const item = res.data[0]
            this.form.risk = `${item.istoday},${item.statisticstype}`
            this.form.warningnotifier = item.warningnotifier || ''
            this.form.conversation = item.conversation || ''
            this.form.sms = item.sms || ''
            this.form.intervals = item.intervals || ''
            this.loading = false
          }
        )
      },
      submit () {
        const list = JSON.parse(JSON.stringify(this.list))
        list.forEach(v => {
          const risk = this.form.risk.split(',')
          v.istoday = risk[0]
          v.statisticstype = ~~risk[1]
          v.warningnotifier = this.form.warningnotifier
          v.conversation = this.form.conversation
          v.sms = this.form.sms
          v.intervals = this.form.intervals
        })
        this.submiting = true
        this.$http('/health/riskLevel/saveOrUpdate', list).then(
          res => {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            })
            this.submiting = false
          }
        )
      }
    },
    created () {
      if (!this.permission) return
      this.getList()
    }
  }
</script>

<style lang="less">
.config-monitor {
  .label {width: 150px;min-width: 150px;}
  .item {padding: 12px 0;color: rgba(255, 255, 255, .8);}
  .checkbtn {transition: color .2s;
    &.on {color: #00c8f1;}
  }
  .fr.ac .checkbtn {width: 120px;}
  .el-button--primary {width: 120px;}

  .list {padding: 0 20px;background-color: #000418;
    table {table-layout: fixed;width: 100%;}
    th, td {padding: 20px 12px;font-size: 14px;border: 2px solid rgba(243, 246, 250, .2);
      &:first-child {border-left: 0;}
      &:last-child {border-right: 0;
        span {cursor: pointer;color: #2a36e0;}
        span + span {margin-left: 30px;}
      }
    }
    tr:last-child td {border-bottom: 0;}
    th {border-top: 0;
      color: rgba(255, 255, 255, .8);}
    td {text-align: center;}
    td input {width: 80px;background: none;border: none;border-bottom: 1px dashed rgba(255, 255, 255, .8);padding: 6px 0;text-align: center;outline: none;color: #fff;font-size: 16px;}
  }
}
</style>
